<template>
  <div class="data-container">
    <h3>门店管理</h3>
    <el-row
      type="flex"
      justify="end"
      class="add"
    >
      <el-button
        id="addBtn"
        type="primary"
        size="medium"
        @click="checkUse"
      >
        选择应用
      </el-button>
      <el-button
        id="addBtn"
        type="primary"
        size="medium"
        @click="openSkuDialog"
      >
        新增
      </el-button>
    </el-row>

    <el-form
      :inline="true"
      size="medium"
      class="forms"
    >
      <el-form-item label="商店名称:">
        <el-input
          v-model="storeForm.storeName"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          id="searchBtn"
          type="primary"
          @click="searchStore"
        >
          查询
        </el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="list"
      fit
      highlight-current-row
      :header-cell-style="{color: '#5373e0',background: '#f3f6fb'}"
      style="width: 100%"
    >
      <el-table-column
        align="center"
        label="门店编号"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.storeNumber }}</span>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="门店名称"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.storeName }}</span>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="地址"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.storeAddress }}</span>
        </template>
      </el-table-column>

      <el-table-column
        fixed="right"
        label="二维码"
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="setCode(scope.row)"
          >
            生成二维码
          </el-button>
        </template>
      </el-table-column>

      <el-table-column
        fixed="right"
        label="操作"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="updateClick(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="deleteClick(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <addStore
      :dialog-visible.sync="dialogVisible"
      @refreshList="getList"
    />
    <setCode
      :dialog-visible.sync="dialogVisible1"
      :code="codes"
      @refreshList="getList"
    />
    <updateStore
      :dialog-visible.sync="dialogVisible2"
      :store-ids="storeId"
      @refreshList="getList"
    />
    <setUse
      :dialog-visible.sync="dialogVisible3"
      @refreshList="getList"
      @getAppId="getAppIds"
    />

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="pageNo"
      :limit.sync="pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import { Route } from 'vue-router'
import { Dictionary } from 'vuex'
import { login } from '@/api/users'
import { Message, Form as ElForm, Input } from 'element-ui'
import { UserModule } from '@/store/modules/user'
import { getStoresDataCode } from '@/api/pay.ts'
import { getStoresData, delStore } from '@/api/organization.ts'
import addStore from '@/views/organization/addStore.vue'
import Pagination from '@/components/Pagination/index.vue'
import setCode from '@/views/organization/setCode.vue'
import updateStore from '@/views/organization/updateStore.vue'
import setUse from '@/views/organization/setUse.vue'
@Component({
  components: {
    addStore,
    Pagination,
    setCode,
    updateStore,
    setUse
  }
})
export default class extends Vue {
  private list:any[] = []
  private pageNo:number = 1;
  private pageSize:number = 10;
  private total:number = 0
  private dialogVisible:boolean = false;
  private dialogVisible1:boolean = false;
  private dialogVisible2:boolean = false;
  private dialogVisible3:boolean = false;
  private appId:string = ''
  private codes:string = ''
  private storeId:string = ''
  private delId:number = 0
  private storeForm = {
    storeName: '',
    storeNumber: ''
  }
   private form = {
     totalAmount: '',
     body: ''

   }
   created() {
     this.getList()
   }

   private async getList() {
     let data = await getStoresData(this.pageNo, this.pageSize, this.storeForm)

     this.list = data.items

     this.total = this.list.length
   }

   private async searchStore() {
     let data = await getStoresData(this.pageNo, this.pageSize, this.storeForm)
     this.storeForm.storeName = ''
     this.list = data.items
   }
   private checkUse() {
     this.dialogVisible3 = true
   }
   private openSkuDialog() {
     this.dialogVisible = true
   }
   private getAppIds(value:any) {
     this.appId = value
   }
   private updateClick(value:any) {
     console.log(value)
     this.storeId = value.id
     this.dialogVisible2 = true
   }
   private async setCode(value:any) {
     if (this.appId === '') {
       this.$message.error('请先选择应用'); return
     }
     this.codes = await getStoresDataCode(this.appId, value.id)
     this.dialogVisible1 = true
   }

   private async deleteClick(value:any) {
     this.delId = value.id
     this.$confirm('确认删除吗?', '提示', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       type: 'warning'
     }).then(() => {
       this.delData()
     }).catch(() => {
       this.$message({
         type: 'info',
         message: '已取消删除'
       })
     })
   }
   private async delData() {
     let data = await delStore(this.delId)

     if (data) {
       Message({
         message: '删除失败',
         type: 'error',
         duration: 2 * 1000
       })
     } else {
       Message({
         message: '删除成功',
         type: 'info',
         duration: 2 * 1000
       })

       this.getList()
     }
   }
}
</script>

<style lang="scss">
  .data-container {
    width: 1200px;
    margin: 00 auto;
    padding: 42px 44px;
    background: white;
    height: 100%;
  }
  .add {
    margin-bottom:10px;
  }
</style>
